<template>
	<div id="app">

		<!-- <router-view /> -->
		<!--<div class="Header_tabs">

			<ul>
				<router-link exact to="/">
					<li>推荐</li>
				</router-link>
				<router-link to="DianTai">
					<li>电台</li>
				</router-link>
				<router-link to="/gedan">
					<li>歌单</li>
				</router-link>
				<router-link to="/Bang_Dan" class="Header_tabs_last">
					<li>榜单</li>
				</router-link>
			</ul>
		</div>-->
		<div class="index">
			<div class="banner">
				<swiper :options="swiperOption" class="swiper-box">
					<swiper-slide class="swiper-item"><img src="../../assets/images/banner1.png" alt=""></swiper-slide>
					<swiper-slide class="swiper-item"><img src="../../assets/images/banner2.png" alt=""></swiper-slide>
					<swiper-slide class="swiper-item"><img src="../../assets/images/banner3.png" alt=""></swiper-slide>
					<swiper-slide class="swiper-item"><img src="../../assets/images/banner4.png" alt=""></swiper-slide>
					<swiper-slide class="swiper-item"><img src="../../assets/images/banner5.png" alt=""></swiper-slide>
					<swiper-slide class="swiper-item"><img src="../../assets/images/banner6.png" alt=""></swiper-slide>
					<swiper-slide class="swiper-item"><img src="../../assets/images/banner7.png" alt=""></swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
			<div class="nav" align="center">
				<router-link to="/" tag="div" class="everyday">
					<img src="../../assets/3.png" alt="">
					<p>电台分类</p>
				</router-link>
				<router-link to="/" tag="div" class="hotsongs">
					<img src="../../assets/4.png" alt="">
					<p>电台排行</p>
				</router-link>
				
			</div>
			<div class="songlist">
				<h3>电台推荐</h3>
				<div class="song">
					<img src="../../assets/5.png" alt="">
					<p>感情信箱   微微一笑  奈何倾城</p>
				</div>
				<div class="song">
					<img src="../../assets/8.png" alt="">
					<p>每期一讲个轻松小故 事</p>
				</div>
				<div class="song">
					<img src="../../assets/9.png" alt="">
					<p>愿有故事的人被温柔 对待</p>
				</div>
				<div class="song">
					<img src="../../assets/10.png" alt="">
					<p>音乐是心灵的力量  奈何倾城</p>
				</div>
				<div class="song">
					<img src="../../assets/11.png" alt="">
					<p>流行音乐是无尽的碰 撞</p>
				</div>
				<div class="song">
					<img src="../../assets/12.png" alt="">
					<p>爱情的滋润 感恩的力 量</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import HeaderMusic from "../HeaderMusic"
	import FooterMusic from "../FooterMusic"
	export default {

		name: "Index",

		data() {

			return {
				swiperOption: {
					pagination: '.swiper-pagination',
					slidesPerView: 1,
					spaceBetween: 30,
					autoplay: 3000,
					grabCursor: true,
					setWrapperSize: true,
					autoHeight: true,
					paginationClickable: true,
					observeParents: true,
					// loop:true
				}
			}

		},

	}
</script>
<style scoped lang="less">
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		/*margin-top: 60px;*/
	}
	
	//轮播图样式
	html,
	body {
		position: relative;
	}
	
	body {
		background: #eee;
	}
	
	.swiper-box {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	
	.swiper-item {
		height: 300/100rem;
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		img {
			height: 300/100rem;
			width: 750/100rem;
		}
	}
	
	//导航页面
	.nav {
		width: 100%;
		height: 170/100rem;
		padding: 20/100rem 0 30/100rem;
		margin-left: 1rem;
		box-sizing: border-box;
		overflow: hidden;
		&>div {
			width: 33.33%;
			height: 120/100rem;
			float: left;
			p {
				font-size: 32/100rem;
				padding-top: 15/100rem;
			}
		}
		.everyday {
			img {
				width: 70/100rem;
				height: 70/100rem;
			}
		}
		.hotsongs {
			img {
				width: 74/100rem;
				height: 74/100rem;
			}
		}
		.party {
			img {
				width: 60/100rem;
				height: 76/100rem;
			}
		}
	}
	
	//推荐歌曲样式
	.songlist {
		padding: 20/100rem 20/100rem 30/100rem;
		overflow: hidden;
		h3 {
			background: url("../../assets/icon/line.png") no-repeat;
			background-size: 5/100rem 23/50rem;
			text-align: left;
			padding-left: 5/100rem;
			font-size: 32/100rem;
			font-weight: normal;
			margin: 10/100rem 0;
		}
		.song {
			width: 33.33%;
			padding: 10/100rem 0;
			box-sizing: border-box;
			float: left;
			img {
				width: 226/100rem;
				height: 226/100rem;
			}
			p {
				padding-left: 10/100rem;
				width: 226/100rem;
				font-size: 24/100rem;
				text-align: left;
				padding-top: 20/100rem;
			}
		}
	}
	
	.Header_tabs {
		width: 100%;
		height: 77/100rem;
	}
	
	.Header_tabs ul {
		overflow: hidden;
		margin-left: 70/100rem;
		li {
			font-size: 33/100rem;
			float: left;
			margin-right: 100/100rem;
			line-height: 77/100rem;
		}
	}
	
	.Header_tabs_last {
		margin-right: 0rem;
	}
</style>